<!-- 藏品管理 -->
<script setup lang="ts">
import TableView from '@/components/TableView.vue'
import {
  NButton,
  NDataTable,
  NForm,
  NFormItem,
  NPagination,
  useMessage,
  NInput,
  NSelect,
  NSpace,
  NTreeSelect,
  NModal,
  NTooltip,
  NDatePicker,
  NBadge,
  NEllipsis,
  type SelectOption,
  type DataTableColumns,
  NPopover,
  type TreeSelectOption
} from 'naive-ui'
import { h, ref, reactive, watch, type VNode, onMounted, onBeforeUnmount } from 'vue'
import router from '@/router'
import { useRoute } from 'vue-router'
import { sendRequest } from '@/utils/api'
import VDialogContent from '@/views/OA/Common/DialogContent.vue'
import { imgDefault, preUrlImg } from '@/utils/errordefaultImg'
import { exportExcel } from '@/utils/exportExcel'
import useFlush from '@/hooks/useFlush'
import { valid } from 'chroma-js'
useFlush('flushManageProcessTable', () =>{ queryTableData();getNumberFn()})
const message = useMessage()
const route = useRoute()
const form = reactive({
  itemName: null,
  batchCode: null, //批次
  firstPersonResponsible: null, //第一责任者
  version: null, //版本
  assetCode: null, //馆藏码
  collectTypeCode: null, //征集方式
  catalogStatusCode: null, //编目状态
  locationCode: null, //批次
  collectStatusCode: null, //批次
  storageStatusCode: null, //入藏状态
  itemTypeCode: null, //版本
  destinationStatusCode: null, //去向
  timeRange: null, //日期范围选择
  lableThing: null, //标签
  sourceName: null, //藏家
  recipient:null, //领取人
  serialNumber: null, //流水号
  collectionTag: null, //藏品标签
})
const backId = ref()
const renderOption = ref(({ node, option }: { node: VNode; option: SelectOption }) =>
  h(NTooltip, null, {
    trigger: () => node,
    default: () => option.label
  })
)
const rowKey: any = (e: any) => e.subItemCode || ''
const tableData: any = ref()
const columns: DataTableColumns = [
  {
    type: 'selection',
    disabled(row: any) {
      return row.storageStatusName === '未入藏'
    },
    width:'2rem',
  },
  {
    title: '流水号',
    key: 'serialNumber',
    align: 'center',
    width:'7rem',
  },
  {
    title: '馆藏码',
    key: 'assetCode',
    align: 'center',
    width:'11rem',
  },
  {
    title: '藏品名称',
    key: 'itemName',
    width:'10rem',
  },
  {
    title: '类型',
    key: 'itemTypeName',
    width:'5rem',
  },
  {
    title: '藏品标签',
    key: 'collectionTag',
    width:'8rem',
    render: (e:any) => {
      if (!e.collectionTag) return ''
      const items = e.collectionTag.split(',').map((m:any) => {
        return h(
          NEllipsis,
          {
            style: {
              width: '80px',
              display: 'inline-block',
              height: '30px',
              lineHeight: '30px',
              textAlign: 'center',
              padding: '0 5px',
              backgroundColor: '#3399ff',
              color: '#fff'
            }
          },
          {
            default: () => m
          }
        )
      })
      return h(
        'div',
        {
          style: {
            display: 'flex',
            flexWrap: 'wrap',
            gap: '5px'
          }
        },
        items
      )
    }
  },
  {
    title: '第一责任者',
    key: 'firstPersonResponsible',
    width:'7rem',
  },
  {
    title: '藏家',
    key: 'sourceName',
    width:'5rem',
  },
  {
    title: '征集方式',
    key: 'collectTypeName',
    align: 'center',
    width:'5rem',
  },
  {
    title: '藏品状态',
    key: 'collectionStatusName',
    align: 'center',
    width:'5rem',
  },
  {
    title: '版本',
    key: 'version',
    width:'5rem',
  },
  {
    title: '库房位置',
    key: 'positionName',
    width:'7rem',
  },
  {
    title: '去向',
    key: 'destinationStatusName',
    align: 'center',
    width:'5rem',
  },
  {
    title: '领取人',
    key: 'recipient',
    width:'5rem',
  },
  {
    title: '操作',
    key: 'action',
    width:'9rem',
    align: 'center',
    render: (e: any) => [
      // 暂时去掉
      // h(
      //   NButton,
      //   {
      //   },
      //   {
      //     default: () => '加入工单'
      //   }
      // ),
      h(
        NButton,
        {
          type: 'primary',
          quaternary: true,
          style:{display:tableData.value[0]?.edit?'inline':'none'},
          onClick: () => {
            router.push({
              path: '/collection/process/ManageProcess/edit',
              query: { id: e.id, type: 0, idSelf: e.id,batchCode:e?.batchCode,redirect: router.currentRoute.value.fullPath } //1详情 0编辑
            })
          }
        },
        {
          default: () => '编辑'
        }
      ),
      h(
        NButton,
        {
          type: 'primary',
          quaternary: true,
          onClick: () => {
            router.push({
              // path: '/collection/process/makeMenu/processDetail',
              // query: {
              //   id: e.subItemCode,
              //   type: 2,
              //   idSelf: e.id,
              //   batchCode: e?.batchCode,
              //   redirect: router.currentRoute.value.fullPath
              // } //0藏品编目详情 1 编目审核详情 2藏品管理详情
              path: '/collection/process/ManageProcess/detail',
              query: { id: e.id, type: 1, idSelf: e.id,batchCode:e?.batchCode,redirect: router.currentRoute.value.fullPath } //1详情 0编辑
            })
          }
        },
        {
          default: () => '详情'
        }
      )
    ]
  }
]
const treeLevel = ref(null)
const reset = () => {
  form.itemTypeCode = null
  form.destinationStatusCode = null
  form.itemName = null
  form.assetCode = null
  form.serialNumber = null
  form.sourceName = null
  form.recipient = null
  form.firstPersonResponsible= null
  form.version= null
  form.batchCode = null
  form.collectionTag = null
  form.collectStatusCode = null
  form.storageStatusCode = null
  form.catalogStatusCode = null
  form.locationCode = null
  treeLevel.value = null
  form.collectTypeCode = null
  form.timeRange = null
  // 重置name字段
  names.value = {
    collectTypeName: '',
    collectionStatusName: '',
    itemTypeName: '',
    positionName: '',
    destinationStatusName: ''
  }
}
//筛选条件
const paginationReactive = reactive({
  page: 1,
  pageSize: 10,
  showSizePicker: true,
  pageSizes: [10, 20, 50, 100, 500],
  itemCount: 0,
  onChange: (page: number) => {
    paginationReactive.page = page
    queryTableData()
  },
  onUpdatePageSize: (pageSize: number) => {
    paginationReactive.pageSize = pageSize
    queryTableData(true)
  }
})
const piciList = ref()
// 字典下拉
const codeFn = async (code: any, refValue: any) => {
  const [error, res] = await sendRequest({
    module: 'collectProcess',
    api: 'listByParentCode',
    override: {
      params: {
        dicCode: code
      }
    }
  })
  if (error) return message.error(error.message)
  refValue.value = res?.data?.map((it: any) => {
    return { value: it.dicCode, label: it.dicName }
  })
}
const labelOptions = ref([])
const getLabelOptions = async () => {
  const [error, res] = await sendRequest({
    module: 'labelConfig',
    api: 'listOptions',
    override: {
      params: {
        tagUseCode: 'A6902'
      }
    }
  })
  if (error) return message.error(error.message)
  labelOptions.value = res?.data
}
const banbenList = ref()
const collectFactionList: any = ref()
const roomList: any = ref()
const statusList: any = ref()
const modalVisible = ref(false)
// 获取申请工单的工单数量
const getNumberFn = async () => {
  const [error, res] = await sendRequest({
    module: 'collectProcess',
    api: 'userOrderCollectItem',
    override: {
      params: {
        page: 1,
        limit: 9999
      }
    }
  })
  if (error) return message.error(error.message)
  topRightNmuber.value = res.data?.totalCount
  dataListSelections.value = res.data?.list?.map((it: any) => it.subItemCode) || []
}
const handler = () => getNumberFn()
document.addEventListener('sqgd-refresh', handler)
onBeforeUnmount(() => document.removeEventListener('sqgd-refresh', handler))

// 批量加入工单
const againBack = async (list?: any) => {
  const [error, res] = await sendRequest({
    module: 'collectProcess',
    api: 'collectingItemUserOrderTemporarySave',
    override: {
      data: {
        subItemCodeList: list || (backId.value ? [backId.value] : dataListSelections.value)
      }
    }
  })
  if (error) return message.error(error.message)
  if (res.code !== 0) return message.error(res.msg)
  message.success(res.msg)
  modalVisible.value = false
  queryTableData()
  getNumberFn() //更新工单数量
}
const labelFont = ref()
const labelVisible = ref(false)
// 标签配置
const openModalLabelConfig =()=>{
  labelFont.value = null
  labelVisible.value = true
}
//点击退回
const handleReback = (val: any, type: any) => {
  // modalVisible.value = true
  console.log(val)
  if (!type) backId.value = null
  else {
    backId.value = val.subItemCode
  }
  againBack()
}

//多选框勾选
type DataListSelectionsItem = {
  id: string
}
const againDelete = async (list: any) => {
  const [error, res] = await sendRequest({
    module: 'collectProcess',
    api: 'collectingItemUserOrderTemporaryDelete',
    override: {
      data: deleteKeys.value
    }
  })
  if (error) return message.error(error.message)
  message.success(res.data)
  modalVisibleDelete.value = false
  getNumberFn()
}

const modalVisibleDelete = ref()
const deleteKeys = ref()
const dataListSelections: any = ref<DataListSelectionsItem[]>([])
// 标签配置确认
const labelConfigAllFn = async () => {
  if(!labelFont.value.toString()) return message.info('请选择藏品标签')
  const [error, res] = await sendRequest({
    module: 'collectProcess',
    api: 'tagUpdate',
    override: {
      data:{ subItemCodeList:dataListSelections.value,
        collectionTag:labelFont.value?.join(','),
      }
    }
  })
  if (error) return message.error(error.message)
  message.success(res.msg)
  queryTableData()
  labelVisible.value = false
}
function selectionChangeHandle(val: any, info: any, action: any) {
  console.log(val, info, action.row, action.action, '多选')
  if (['check', 'checkAll'].includes(action.action)) {
    //新增
    if (action.action == 'checkAll') {
      againBack(tableData.value?.map((it: any) => it.subItemCode))
    } else {
      againBack([action.row?.subItemCode])
    }
  } else {
    //移除
    modalVisibleDelete.value = true
    if (action.action == 'uncheckAll') {
      deleteKeys.value = tableData.value?.map((it: any) => it.subItemCode)
    } else {
      deleteKeys.value = [action.row?.subItemCode]
    }
  }
  // dataListSelections.value = val
  // notIssuedId.value = []
  // info.map((i: any) => {
  //   if (i.distributionStatus == '0') {
  //     notIssuedId.value.push(i.id)
  //   }
  // })
}

//表格数据
const tableLoading = ref(false)

const queryTableDataBefore = () => {
  queryTableData(true)
  // if (
  //   form.itemTypeCode ||
  //   form.itemName ||
  //   form.catalogStatusCode ||
  //   form.locationCode ||
  //   form.collectTypeCode
  // ) {
  //   queryTableData()
  // } else {
  //   message.info('请输入查询条件')
  // }
}

const names = ref<any>({
  collectTypeName: '',
  collectionStatusName: '',
  itemTypeName: '',
  positionName: '',
  destinationStatusName: ''
})
const selectTreeItem = (value: string, option: any, label: string, name: string) => {
  console.log(value, option)
  names.value[name] = option ? option[label] : ''
  console.log('names.value: ', names.value)
}
const selectItem = (value: string, option: any, name: string) => {
  console.log(value, option)
  names.value[name] = option ? option.label : ''
  console.log('names.value: ', names.value)
}

const queryTableData = async (resetPage = false) => {
  if (resetPage) paginationReactive.page = 1
  tableLoading.value = true
  // dataListSelections.value = []
  const [error, res] = await sendRequest({
    module: 'collectProcess',
    api: 'collectingItemslist',
    override: {
      params: {
        ...form,
        ...names.value, // 加入选项名称字段
        startDate: form.timeRange?.[0],
        endDate: form.timeRange?.[1],
        positionLevel: treeLevel.value,
        page: paginationReactive.page,
        limit: paginationReactive.pageSize,
        listType: 3, //1 初编 编目 2 编目审核 3 藏品
        timeRange: null
      }
    }
  })
  if (error) return message.error(error.message)
  const tmp: any = res.data
  tableData.value = tmp?.list
  paginationReactive.itemCount = tmp.totalCount
  console.log(paginationReactive.itemCount)
  tableLoading.value = false
}
function download(headers: any, data: any, name?: string) {
  const val = headers['content-disposition']?.match(/(?<=filename=)(.*)/)
  let filename = val ? decodeURIComponent(val[0]) : name + '导出.xlsx'
  if (!filename.includes('xlsx')) {
    filename = filename.replace('xls', 'xlsx')
  }
  const a = document.createElement('a')
  let binaryData = []
  binaryData.push(data)
  a.href = window.URL.createObjectURL(new Blob(binaryData))
  a.download = filename
  a.click()
  window.URL.revokeObjectURL(a.href)
}
const exportLoading = ref(false)
const exportNowLoading = ref(false)
const outputExcelNow = async () => {
  exportNowLoading.value = true
  let columnsCopy = columns.slice(1,columns.length-1)
  const titleArrKey = columnsCopy.map((item: any) => item.key)
  const titleArrName = columnsCopy.map((item: any) => item.title)
  const exportData = JSON.parse(JSON.stringify(tableData.value))
  const Arr = exportData.map((item: any) => {
    const obj: any = {}
    titleArrKey.map((it:any)=>{
      obj[it] = item[it]
    })
    return obj
  })
  exportExcel(Arr, '藏品信息列表数据', titleArrName, '藏品信息列表数据')
  exportNowLoading.value = false
}
const outputExcel = async () => {
  exportLoading.value = true
  const [error, res, headers] = await sendRequest({
    module: 'collectProcess',
    api: 'exportCollectingItems',
    override: {
      params: {
        ...form,
        startDate: form.timeRange?.[0],
        endDate: form.timeRange?.[1],
        positionLevel: treeLevel.value,
        // page: paginationReactive.page,
        // limit: paginationReactive.pageSize,
        listType: 3, //1 初编 编目 2 编目审核 3 藏品
        timeRange: null
      }
    }
  })
  if (error) return message.error(error.message)
  download(headers, res)
  exportLoading.value = false
}
const configData: any = ref([])
const otherConfigData: any = ref([])
const getOptionFn = async () => {
  const [error, res] = await sendRequest({
    module: 'collectProcess',
    api: 'countCollectingByType'
  })
  if (error) return message.error(error.message)
  configData.value = res?.data.slice(0, 6)
  otherConfigData.value = res.data?.slice(6)
}

watch(
  () => route.path,
  () => {
    if (route.path == '/collection/process/manageProcess/index') {
      getNumberFn()
    }
  },
  { deep: true, immediate: true }
)
onMounted(async () => {
  await queryTableData()
  getNumberFn()
  getTreeSelect()
  getLabelOptions()
  codeFn('A45', statusList) //编目状态A45
  //  codeFn('A46',)//入藏状态A46
  codeFn('A46', inStatusList) //入藏状态A46
  //  codeFn('A47',)//藏品状态A47
  codeFn('A36', statusList30) //去向,关联字典A36
  // codeFn('A47', roomList) //库房位置???
  await getFirstFn(0, roomList)
  codeFn('A47', piciList) //藏品状态A47
  // codeFn('A34', banbenList) //版本类型A34
  codeFn('A30', collectFactionList) //征集方式A30
  getOptionFn()
})
const inStatusList = ref()
const statusList30 = ref()
const showDetail = ref(false) //显示详情
const getTreeSelect = async () => {
  const [error, res] = await sendRequest({
    module: 'collectProcess',
    api: 'listTreeAll',
    override: {
      params: {
        statusCode: 'A4901'
      }
    }
  })
  if (error) return message.error(error.message)
  banbenList.value = res.data
}

const changeTree = (value: any, options: any) => {
  treeLevel.value = options?.positionLevel
  form.locationCode = value
  // 保存name字段
  names.value.positionName = options ? options.label : ''
  return
}
const getChildren = async (option: TreeSelectOption) => {
  const children: any = []
  const [error, res] = await sendRequest({
    module: 'collectProcess',
    api: 'listOptionsByParentId',
    override: {
      params: {
        parentId: option.value
      }
    }
  })
  if (error) return message.error(error.message)
  if (res.data.length === 0) {
    //@ts-ignore
    options.isLeaf = true
    return
  }
  res?.data.map((it: any) => {
    // @ts-ignore
    children.push({ ...it, isLeaf: false, depth: option.depth + 1 })
  })

  return children
}
const handleLoad = async (option: any) => {
  const [error, res] = await sendRequest({
    module: 'collectProcess',
    api: 'listOptionsAndLevelByParentId',
    override: {
      params: {
        parentId: option.value
      }
    }
  })

  if (error) return message.error(error.message) && undefined
  if (res.code !== 0) return message.error(res.msg) && undefined
  if (res.data.length === 0) {
    option.isLeaf = true
    return
  }
  // @ts-ignore
  res.data.forEach((e) => (e.isLeaf = false))
  option.children = res.data as any[]
  // return new Promise<void>((resolve) => {
  //         window.setTimeout(() => {
  //           option.children = getChildren(option)
  //           resolve()
  //         }, 1000)
  //       })
}
// 库房位置
const getFirstFn = async (id: any, refValue: any) => {
  const [error, res] = await sendRequest({
    module: 'collectProcess',
    api: 'listOptionsAndLevelByParentId',
    override: {
      params: {
        parentId: id
      }
    }
  })
  if (error) return message.error(error.message)
  refValue.value =
    res?.data.map((it: any) => {
      return { ...it, isLeaf: false, depth: 1 }
    }) || []
}
const topRightNmuber = ref()

const BatchDelete = () => {
  // if (deleteId.value?.length === 0) return message.warning('请至少选择一项！')
  // type.value = false
  modalVisible.value = true
}


</script>

<template>
  <TableView class="table">
    <template #form>
      <div>
        <NSpace justify="space-between">
          <div class="link_content">
            <div
              class="link_item"
              :key="i.id"
              v-for="i in configData"
            >
              <img
                style="height: 35rem"
                :src="preUrlImg + i.code + '.png'"
                :onerror="imgDefault"
              />
              <div>
                <div style="margin-left: 10rem">{{ i.value }}件</div>
                <div style="margin-left: 10rem">{{ i.label?.slice(0, 15) }}</div>
              </div>
            </div>
            <NPopover
              trigger="click"
              :overlap="false"
              raw
              :show-arrow="false"
              v-if="otherConfigData.length > 0"
            >
              <template #trigger>
                <div
                  class="link_item"
                  style="justify-content: center; cursor: pointer"
                  v-if="otherConfigData.length > 0"
                >
                  更多
                </div>
              </template>
              <div class="link_content">
                <div
                  class="link_item1"
                  v-for="i in otherConfigData"
                  :key="i.id"
                >
                  <img
                    style="height: 35rem"
                    :src="preUrlImg + i.code + '.png'"
                    :onerror="imgDefault"
                  />
                  <div>
                    <div style="margin-left: 10rem">{{ i.value }}件</div>
                    <div style="margin-left: 10rem">{{ i.label?.slice(0, 15) }}</div>
                  </div>
                </div>
              </div>
            </NPopover>
          </div>
          <NSpace align="end">
            <!-- 暂时去掉 勿删 -->
            <!-- <NButton
              color="#5FB17F"
              ghost
              @click="handleReback(1, false)"
              :disabled="dataListSelections.length ? false : true"
            >
              批量加入工单
            </NButton> -->
           
          </NSpace>
        </NSpace>
        <NSpace justify="start">
          <NForm
            :show-feedback="false"
            label-placement="left"
            label-width="98px"
            @keydown.enter.prevent="queryTableData()"
          >
            <NSpace style="margin-bottom: 10px">
              <NFormItem label="批次编号:">
                <NInput
                  placeholder="请输入批次编号"
                  v-model:value="form.batchCode"
                  style="width: 177px"
                />
              </NFormItem>
              <NFormItem label="藏品名称:">
                <NInput
                  placeholder="请输入藏品名称"
                  v-model:value="form.itemName"
                  style="width: 177px"
                />
              </NFormItem>
              <NFormItem label="馆藏码:">
                <NInput
                  placeholder="请输入馆藏码"
                  style="width: 177px"
                  v-model:value="form.assetCode"
                />
              </NFormItem>
              <NFormItem label="流水号:">
                <NInput
                  placeholder="请输入流水号"
                  style="width: 177px"
                  v-model:value="form.serialNumber"
                />
              </NFormItem>
              <!-- 飞飞：去掉 -->
              <!-- <NFormItem label="入藏状态:">
                <NSelect
                  :options="inStatusList"
                  v-model:value="form.storageStatusCode"
                  placeholder="请选择入藏状态"
                  clearable
                  filterable
                  style="width: 100px"
                />
              </NFormItem>
              <NFormItem label="编目状态:">
                <NSelect
                  :options="statusList"
                  v-model:value="form.catalogStatusCode"
                  placeholder="请选择状态"
                  clearable
                  filterable
                  style="width: 100px"
                />
              </NFormItem> -->

             
             
              <NFormItem label="版本类型:">
                <n-tree-select
                  :options="banbenList"
                  children-field="childList"
                  key-field="classificationCode"
                  label-field="classificationName"
                  v-model:value="form.itemTypeCode"
                  :render-option="renderOption"
                  placeholder="请选择版本类型"
                  clearable
                  filterable
                  @update:value="(val, opt) => selectTreeItem(val, opt, 'classificationName', 'itemTypeName')"
                  style="width: 177px"
                />
              </NFormItem>
              <NFormItem label="征集方式:">
                <NSelect
                  :options="collectFactionList"
                  v-model:value="form.collectTypeCode"
                  placeholder="请选择征集方式"
                  clearable
                  filterable
                  @update:value="(val, opt) => selectItem(val, opt, 'collectTypeName')"
                  style="width: 177px"
                />
              </NFormItem>
              <NFormItem label="藏品状态:">
                <NSelect
                  :options="piciList"
                  v-model:value="form.collectStatusCode"
                  placeholder="请选择藏品状态"
                  clearable
                  filterable
                  @update:value="(val, opt) => selectItem(val, opt, 'collectionStatusName')"
                  style="width: 177px"
                />
              </NFormItem>
              <!-- 第二行 -->
              <NFormItem
                label="去向:"
                path="destinationStatusCode"
              >
                <NSelect
                  :options="statusList30"
                  v-model:value="form.destinationStatusCode"
                  placeholder="请选择去向"
                  clearable
                  @update:value="(val, opt) => selectItem(val, opt, 'destinationStatusName')"
                  style="width: 177px"
                />
              </NFormItem>
              <NFormItem label="库房位置:">
                <n-tree-select
                  v-model:value="form.locationCode"
                  :options="roomList"
                  check-strategy="all"
                  :show-path="false"
                  key-field="value"
                  :allow-checking-not-loaded="true"
                  style="width: 177px"
                  placeholder="请选择类型"
                  :on-load="handleLoad"
                  clearable
                  :on-update:value="changeTree"
                />
                <!-- <NSelect
                  :options="roomList"
                  v-model:value="form.locationCode"
                  placeholder="请选择库房位置"
                  clearable
                  filterable
                  style="width: 200px"
                /> -->
              </NFormItem>
              <NFormItem label="藏家:">
                <NInput
                  placeholder="请输入藏家"
                  style="width: 177px"
                  v-model:value="form.sourceName"
                />
              </NFormItem>

              <NFormItem
                label="藏品标签"
                path="collectionTag"
              >
                <NSelect
                  :options="labelOptions"
                  v-model:value="form.collectionTag"
                  placeholder="请选择藏品标签"
                  clearable
                  style="width: 177px"
                />
              </NFormItem>
              <NFormItem label="领取人:">
                <NInput
                  placeholder="请输入领取人"
                  style="width: 177px"
                  v-model:value="form.recipient"
                />
              </NFormItem>
              <NFormItem label="版本:">
                <NInput
                  placeholder="请输入版本"
                  v-model:value="form.version"
                  style="width: 177px"
                />
              </NFormItem>
              <NFormItem label="第一责任者:">
                <NInput
                  placeholder="请输入第一责任者"
                  v-model:value="form.firstPersonResponsible"
                  style="width: 177px"
                />
              </NFormItem>
              <NFormItem label="入藏时间:">
                <NDatePicker
                  input-readonly
                  placeholder="请选择入藏时间"
                  type="daterange"
                  value-format="yyyy-MM-dd"
                  v-model:formatted-value="form.timeRange"
                  style="width: 265px"
                  clearable
                />
              </NFormItem>
              <NSpace>
              <NFormItem>
                <NButton
                  type="primary"
                  style="width: 78px"
                  ghost
                  @click="queryTableDataBefore()"
                >
                  查询
                </NButton>
              </NFormItem>
              <NFormItem>
                <NButton
                  style="width: 78px; "
                  ghost
                  type="primary"
                  @click="reset()"
                >
                  重置
                </NButton>
              </NFormItem>
              <NButton
              color="#5FB17F"
              @click="openModalLabelConfig()"
              :disabled="dataListSelections.length ? false : true"
            >
              标签配置
            </NButton>
            <NButton
              color="#5FB17F"
              @click="outputExcel()"
              :loading='exportLoading'
            >
            导出Excel
            </NButton>
            <NButton
              color="#5FB17F"
              @click="outputExcelNow()"
              :loading='exportNowLoading'
            >
              导出当前页
            </NButton>
            <NButton
              color="#5FB17F"
              @click="
                () =>
                  router.push({
                    path: '/collection/process/ManageProcess/submitFile',
                    query: { type: 1, redirect: router.currentRoute.value.fullPath } //1 藏品管理 2 工单
                  })
              "
            >
              <div>
                <div>申请工单</div>

                <div
                  style="position: absolute; top: -7px; right: -5px; color: red; font-size: 16px"
                >
                  <n-badge :value="topRightNmuber" />
                </div>
              </div>
            </NButton>
          </NSpace>
            </NSpace>

            <NSpace>

            </NSpace>
          </NForm>
        </NSpace>
      </div>
    </template>

    <template #table="props">
      <NDataTable
        v-bind="props"
        :bordered="false"
        :row-key="rowKey"
        :columns="columns"
        :data="tableData"
        :loading="tableLoading"
        :checked-row-keys="dataListSelections"
        @update:checked-row-keys="selectionChangeHandle"
      />
    </template>

    <template #pagination>
      <NPagination
        show-size-picker
        show-quick-jumper
        :page-sizes="paginationReactive.pageSizes"
        :item-count="paginationReactive.itemCount"
        :page="paginationReactive.page"
        :page-size="paginationReactive.pageSize"
        @update:page="paginationReactive.onChange"
        @update:page-size="paginationReactive.onUpdatePageSize"
        :suffix="() => '页'"
      >
        <template #prefix>
          <span style="font-size: 14px">共{{ paginationReactive.itemCount }}条</span>
        </template>
      </NPagination>
    </template>
  </TableView>
  <NModal
    :auto-focus="false"
    v-model:show="modalVisible"
  >
    <VDialogContent
      @close="modalVisible = false"
      @submit="againBack"
      title="警告"
    >
      <div style="width: 300rem; height: 100rem; text-align: center; line-height: 100rem">
        是否对当前藏品进行退回?
      </div>
    </VDialogContent>
  </NModal>
  <NModal
    :auto-focus="false"
    v-model:show="modalVisibleDelete"
  >
    <VDialogContent
      @close="modalVisibleDelete = false"
      @submit="againDelete"
      title="移除提示"
    >
      <div style="width: 300rem; height: 100rem; text-align: center; line-height: 100rem">
        您确定要移除吗?
      </div>
    </VDialogContent>
  </NModal>
  <NModal
    :auto-focus="false"
    v-model:show="labelVisible"
  >
    <VDialogContent
      @close="labelVisible = false"
      @submit="labelConfigAllFn"
      title="标签配置"
    > 
        <div style="display: flex; width: 350rem;align-items:center">
                    <span style="color: red">*</span>
                    藏品标签: 
                    <NSelect
                  :options="labelOptions"
                  v-model:value="labelFont"
                  placeholder="请选择藏品标签"
                  clearable
                  multiple
                  style="width: 177px;margin-left: 10px"
                />
                  </div>
                
             
    </VDialogContent>
  </NModal>
  
</template>

<style scoped lang="scss">
.table {
  height: 100%;
  padding: 29px 30px 42px;

  .link_content {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 10rem;
  }

  .link_item {
    width: 175rem;
    height: 68rem;
    background: #e6e6e6;
    border-radius: 6rem;
    border: 1rem solid #ececec;
    display: flex;
    align-items: center;
    padding-left: 5rem;
    text-decoration: none;
    color: initial;
  }

  img {
    display: block;
    width: 35rem;
    height: 35rem;
    border-radius: 50%;
  }
}

.link_item1 {
  width: 255rem;
  height: 68rem;
  background: #e6e6e6;
  border-radius: 6rem;
  border: 1rem solid #ececec;
  display: flex;
  align-items: center;
  padding-left: 5rem;
  text-decoration: none;
  color: initial;
}
</style>
